<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表配置使用示例</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center shadow-lg">
                        <i class="fa fa-lightbulb-o text-2xl text-blue-600" aria-hidden="true"></i>
                    </div>
                    <span class="text-2xl font-bold text-white text-shadow-enhanced">InsightBlog</span>
                </a>
                
                <!-- 桌面端导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="insight-nav-link-inactive">
                        首页
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link">
                        发现
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        分类
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        专栏
                        <span class="insight-nav-underline"></span>
                    </a>
                    <a href="#" class="insight-nav-link-inactive">
                        关于
                        <span class="insight-nav-underline"></span>
                    </a>
                </nav>
                
                <!-- 功能按钮区 -->
                <div class="flex items-center space-x-5">
                    <button class="text-white hover:text-blue-100 transition-colors">
                        <i class="fa fa-search text-xl" aria-hidden="true"></i>
                    </button>
                    <button class="hidden sm:flex items-center space-x-2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-full transition-all">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        <span>登录</span>
                    </button>
                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-white hover:text-blue-100 transition-colors" id="mobile-menu-btn">
                        <i class="fa fa-bars text-2xl" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端导航菜单 -->
            <div class="md:hidden hidden mt-4 bg-white/95 backdrop-blur-md rounded-xl shadow-xl p-4" id="mobile-menu">
                <nav class="flex flex-col space-y-4">
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">首页</a>
                    <a href="#" class="text-blue-600 font-medium py-2 border-b border-gray-100">发现</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">分类</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 border-b border-gray-100 transition-colors">专栏</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium py-2 transition-colors">关于</a>
                    <button class="flex items-center justify-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg transition-all mt-2">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        <span>登录 / 注册</span>
                    </button>
                </nav>
            </div>
        </div>
    </header>

    <!-- 页面标题区域 -->
    <section class="hero-gradient pt-28 pb-16 md:pt-36 md:pb-24 relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
            <div class="decoration-circle decoration-circle-2"></div>
            <div class="decoration-circle decoration-circle-3"></div>
        </div>
        
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="max-w-4xl">
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 leading-tight text-shadow-enhanced">
                    使用合并后的文章列表配置
                </h1>
                <p class="text-xl text-white/90 mb-6 max-w-2xl">
                    展示如何使用合并后的筛选组件、文章卡片和分页组件
                </p>
                <div class="flex flex-wrap gap-3">
                    <span class="stats-badge">共 10,248 篇文章</span>
                    <span class="stats-badge">30+ 分类</span>
                    <span class="stats-badge">2,000+ 创作者</span>
                </div>
            </div>
        </div>
        
        <!-- 波浪分隔符 -->
        <div class="wave-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
                <path fill="#f9fafb" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
            </svg>
        </div>
    </section>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex flex-col lg:flex-row gap-10">
            <!-- 筛选侧边栏 -->
            <aside class="lg:w-1/4 xl:w-1/5">
                <div class="filter-sidebar">
                    <h3 class="text-xl font-bold text-gray-900 mb-6">内容筛选</h3>
                    
                    <!-- 分类筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-section-title">文章分类</h4>
                        <ul class="filter-list">
                            <li>
                                <a href="#" class="filter-item filter-item-active">
                                    <span>全部内容</span>
                                    <span class="filter-count filter-count-active">10.2k</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>技术</span>
                                    <span class="filter-count">2.4k</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>职场</span>
                                    <span class="filter-count">1.8k</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>设计</span>
                                    <span class="filter-count">1.5k</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>旅行</span>
                                    <span class="filter-count">1.2k</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>美食</span>
                                    <span class="filter-count">980</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>阅读</span>
                                    <span class="filter-count">850</span>
                                </a>
                            </li>
                        </ul>
                        <button class="mt-4 text-blue-600 hover:text-blue-700 text-sm font-medium transition-colors">
                            显示更多 <i class="fa fa-angle-down ml-1" aria-hidden="true"></i>
                        </button>
                    </div>
                    
                    <!-- 日期筛选 -->
                    <div class="filter-section">
                        <h4 class="filter-section-title">发布日期</h4>
                        <ul class="filter-list">
                            <li>
                                <a href="#" class="filter-item filter-item-active">
                                    <span>全部时间</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最近一周</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最近一月</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最近三月</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最近一年</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- 排序方式 -->
                    <div class="filter-section">
                        <h4 class="filter-section-title">排序方式</h4>
                        <ul class="filter-list">
                            <li>
                                <a href="#" class="filter-item filter-item-active">
                                    <span>最新发布</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最多阅读</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最多点赞</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="filter-item">
                                    <span>最多评论</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors">
                        应用筛选
                    </button>
                </div>
            </aside>

            <!-- 文章列表区域 -->
            <div class="article-list-container">
                <!-- 列表头部 -->
                <div class="article-list-header">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                        <div class="flex flex-wrap gap-3 mb-4 md:mb-0">
                            <button class="filter-button filter-button-active">
                                全部
                            </button>
                            <button class="filter-button filter-button-default">
                                技术
                            </button>
                            <button class="filter-button filter-button-default">
                                职场
                            </button>
                            <button class="filter-button filter-button-default">
                                设计
                            </button>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <span class="text-gray-600 text-sm hidden sm:inline">视图:</span>
                            <div class="view-toggle">
                                <button class="view-toggle-button view-toggle-button-active">
                                    <i class="fa fa-th-large" aria-hidden="true"></i>
                                </button>
                                <button class="view-toggle-button">
                                    <i class="fa fa-list" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文章网格 -->
                <div class="article-grid">
                    <!-- 文章卡片 1 -->
                    <article class="article-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/42/600/400" alt="文章封面" class="article-card-image">
                            <span class="absolute top-3 left-3 blog-tag blog-tag-success">技术</span>
                        </div>
                        <div class="article-card-content">
                            <div class="article-card-meta">
                                <span class="article-card-date">2023-06-20</span>
                                <div class="article-card-views">
                                    <i class="fa fa-eye mr-1" aria-hidden="true"></i> 1.2k
                                </div>
                            </div>
                            <h3 class="article-card-title">
                                <a href="#">使用合并后的Tailwind配置构建现代化界面</a>
                            </h3>
                            <p class="article-card-excerpt">
                                本文详细介绍了如何将多个页面的Tailwind配置合并到公共配置中，包括自定义工具类、组件样式和主题扩展的使用方法...
                            </p>
                            <div class="article-card-footer">
                                <div class="article-card-author">
                                    <img src="https://picsum.photos/id/26/100/100" alt="作者头像" class="article-card-author-avatar">
                                    <span class="article-card-author-name">张开发</span>
                                </div>
                                <div class="article-card-actions">
                                    <button class="article-card-action"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                    <button class="article-card-action-comment"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </article>

                    <!-- 文章卡片 2 -->
                    <article class="article-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/180/600/400" alt="文章封面" class="article-card-image">
                            <span class="absolute top-3 left-3 blog-tag blog-tag-purple">设计</span>
                        </div>
                        <div class="article-card-content">
                            <div class="article-card-meta">
                                <span class="article-card-date">2023-06-18</span>
                                <div class="article-card-views">
                                    <i class="fa fa-eye mr-1" aria-hidden="true"></i> 2.5k
                                </div>
                            </div>
                            <h3 class="article-card-title">
                                <a href="#">筛选组件和文章列表的最佳实践</a>
                            </h3>
                            <p class="article-card-excerpt">
                                探讨如何设计高效的文章筛选系统，包括侧边栏筛选、快速筛选按钮和视图切换功能，提升用户体验...
                            </p>
                            <div class="article-card-footer">
                                <div class="article-card-author">
                                    <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="article-card-author-avatar">
                                    <span class="article-card-author-name">李设计</span>
                                </div>
                                <div class="article-card-actions">
                                    <button class="article-card-action"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                    <button class="article-card-action-comment"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </article>

                    <!-- 文章卡片 3 -->
                    <article class="article-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/24/600/400" alt="文章封面" class="article-card-image">
                            <span class="absolute top-3 left-3 blog-tag blog-tag-primary">前端</span>
                        </div>
                        <div class="article-card-content">
                            <div class="article-card-meta">
                                <span class="article-card-date">2023-06-15</span>
                                <div class="article-card-views">
                                    <i class="fa fa-eye mr-1" aria-hidden="true"></i> 3.1k
                                </div>
                            </div>
                            <h3 class="article-card-title">
                                <a href="#">组件化CSS架构的设计原则</a>
                            </h3>
                            <p class="article-card-excerpt">
                                介绍如何构建可维护的CSS组件系统，包括命名规范、样式组织和复用策略，让样式代码更加清晰和高效...
                            </p>
                            <div class="article-card-footer">
                                <div class="article-card-author">
                                    <img src="https://picsum.photos/id/32/100/100" alt="作者头像" class="article-card-author-avatar">
                                    <span class="article-card-author-name">王架构</span>
                                </div>
                                <div class="article-card-actions">
                                    <button class="article-card-action"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                    <button class="article-card-action-comment"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </article>

                    <!-- 文章卡片 4 -->
                    <article class="article-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/96/600/400" alt="文章封面" class="article-card-image">
                            <span class="absolute top-3 left-3 blog-tag blog-tag-success">职场</span>
                        </div>
                        <div class="article-card-content">
                            <div class="article-card-meta">
                                <span class="article-card-date">2023-06-12</span>
                                <div class="article-card-views">
                                    <i class="fa fa-eye mr-1" aria-hidden="true"></i> 1.8k
                                </div>
                            </div>
                            <h3 class="article-card-title">
                                <a href="#">远程工作效率提升指南</a>
                            </h3>
                            <p class="article-card-excerpt">
                                分享在远程工作环境下如何保持高效和专注，包括时间管理、环境设置和团队协作的最佳实践...
                            </p>
                            <div class="article-card-footer">
                                <div class="article-card-author">
                                    <img src="https://picsum.photos/id/45/100/100" alt="作者头像" class="article-card-author-avatar">
                                    <span class="article-card-author-name">陈效率</span>
                                </div>
                                <div class="article-card-actions">
                                    <button class="article-card-action"><i class="fa fa-heart-o" aria-hidden="true"></i></button>
                                    <button class="article-card-action-comment"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="pagination-item pagination-item-disabled">
                        <i class="fa fa-angle-left" aria-hidden="true"></i>
                    </a>
                    <a href="#" class="pagination-item pagination-item-active">1</a>
                    <a href="#" class="pagination-item pagination-item-default">2</a>
                    <a href="#" class="pagination-item pagination-item-default">3</a>
                    <span class="pagination-item pagination-item-default">...</span>
                    <a href="#" class="pagination-item pagination-item-default">10</a>
                    <a href="#" class="pagination-item pagination-item-default">
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" id="back-to-top">
        <i class="fa fa-arrow-up" aria-hidden="true"></i>
    </button>

    <script>
        // 导航滚动效果
        document.addEventListener('DOMContentLoaded', function() {
            const header = document.getElementById('main-header');
            const backToTopBtn = document.getElementById('back-to-top');
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');
            
            // 滚动监听
            window.addEventListener('scroll', function() {
                if (window.scrollY > 100) {
                    header.classList.add('nav-scrolled');
                    backToTopBtn.classList.add('back-to-top-visible');
                } else {
                    header.classList.remove('nav-scrolled');
                    backToTopBtn.classList.remove('back-to-top-visible');
                }
            });
            
            // 移动端菜单切换
            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 返回顶部
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
            
            // 筛选按钮切换
            const filterButtons = document.querySelectorAll('.filter-button');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    filterButtons.forEach(btn => {
                        btn.classList.remove('filter-button-active');
                        btn.classList.add('filter-button-default');
                    });
                    this.classList.remove('filter-button-default');
                    this.classList.add('filter-button-active');
                });
            });
            
            // 视图切换按钮
            const viewButtons = document.querySelectorAll('.view-toggle-button');
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    viewButtons.forEach(btn => {
                        btn.classList.remove('view-toggle-button-active');
                    });
                    this.classList.add('view-toggle-button-active');
                });
            });
        });
    </script>
</body>
</html> 